<!--
  待办事项-委托函

  props：
    title string 标题
    operator string 操作人
    date string 日期
    afterTitle string 标题后面右侧
    flagBgColor string 标签颜色 default：--color-brand

  slot：
    after-title 字段afterTitle的插槽
-->
<template>
  <div class="entrust-wrapper" :style="varStyle">
    <f7-card class="entrust-card">
      <f7-card-content class="entrust-content">
        <div class="title-wrapper">
          <div class="title" :class="{'is-split': splited}">
            <span>{{title}}</span>
            <slot name="after-title">
              <span class="after-title">{{afterTitle}}</span>
            </slot>
          </div>
        </div>
        <div class="info">
          <div class="operator" v-if="operator">{{operator}}</div>
          <span>{{date}}</span>
        </div>
      </f7-card-content>
    </f7-card>
  </div>
</template>

<script>
export default {
  name: "qm-entrust-card",
  props: {
    title: {
      type: String,
      default: "2021年民主党教学需求委托函"
    },
    operator: {
      type: String,
      default: "系统管理员"
    },
    date: {
      type: String
    },
    afterTitle: String,
    flagBgColor: String,
    splited: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    varStyle() {
      return ({
        "--flag-bg-color": this.flagBgColor
      })
    }
  }
}
</script>

<style lang="less" scoped>
.entrust-wrapper {
  margin-bottom: calc(20px * var(--ratio));
  box-shadow: 0 calc(6px * var(--ratio)) calc(14px * var(--ratio)) 0 rgba(0, 0, 0, 0.05);
  border-radius: calc(16px * var(--ratio));
  &:last-child {
    margin-bottom: 0;
  }

  .entrust-card {
    margin: 0;
    background: #FFFFFF;
    box-shadow: none;
    border-radius: none;

    .entrust-content {
      padding: calc(32px * var(--ratio));

      .title-wrapper {
        position: relative;
        margin-bottom: calc(15px * var(--ratio));
        font-size: var(--font-size-subtitle);
        color: #242424;
        font-weight: 500;

        &::before {
          content: "";
          position: absolute;
          left: calc(-32px * var(--ratio));
          top: 50%;
          transform: translateY(-50%);
          display: block;
          width: calc(10px * var(--ratio));
          height: calc(23px * var(--ratio));
          background: var(--flag-bg-color, var(--color-brand));
          border-radius: 0 calc(5px * var(--ratio)) calc(5px * var(--ratio)) 0;
        }

        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;

          &.is-split {
            padding-bottom: calc(20px * var(--ratio));
            border-bottom: 1px solid #F1F6FD;
          }
        }

        .after-title {
          font-size: calc(26px * var(--ratio));
          // color: #61677A;
          color: #8998AC;
        }
      }
      .info {
        color: #8998AC;
        font-size: var(--font-size-subcontent);

        .operator {
          display: inline-block;
          min-width: calc(6 * var(--font-size-subcontent));
        }
      }
    }
  }
}
</style>
